<template>
  <view class="unit-popup">
    <div class="top" :style="{ marginBottom: showNext ? '0' : '20rpx' }">
      <view class="unit-popup-bar"></view>
      <view class="unit-popup-title">选择计量单位</view>
      <view class="unit-popup-search" v-if="!showNext">
        <input
          v-model="unitSearch"
          placeholder="请输入计量单位关键词"
          @input="onUnitSearch"
        />
        <uni-icons type="clear" size="20" v-if="unitSearch" class="clearIcon" color="#ccc" ></uni-icons>
      </view>
    </div>
    <div class="middle">
      <scroll-view
        scroll-y="true"
        class="unit-popup-list"
        v-if="!showNext"
      >
        <template>
          <view
            v-for="item in filteredUnitList"
            :key="item.id"
            class="unit-popup-item"
            @click="selectUnit(item)"
          >
            <view class="unitItem">
              <!-- 小圆点 -->
              <image v-if="item.id==selectedUnit.value" src="https://erised-fresh.oss-cn-shenzhen.aliyuncs.com/592800/5dzFWVQvsJvT270a6e00d56d176eab1a05985d87d2e2.png?x-oss-process=image/resize,w_64%2Ch_64" class="radio-img" mode="aspectFill" lazy-load="true">
              </image>
              <view :class="['radio-dot']" v-else></view>

              <view class="radio-text" v-html="getHighlightText(item.unitName)"></view>
            </view>
          </view>
        </template>
      </scroll-view>
      <view v-if="showNext" class="unit-popup-other">
        <view class="otherName">其他 <text>*</text></view>
        <input
          v-model="unitName"
          :class="{ 'error-input': showOtherError }"
          placeholder="请输入其他单位"
        />
        <view v-if="showOtherError" class="unit-popup-error"
          >请输入其他单位</view
        >
      </view>
    </div>
    <view class="bottom">
      <view class="unit-popup-btns">
        <view v-if="showNext" class="nextBtn">
          <view class="unit-btn-back" @click="toForword" v-if="showNext">
            返回上一步
          </view>
          <view class="unit-btn-submit" @click="handelAdd">确定</view>
        </view>
        <view v-if="!showNext">
          <button class="unit-btn-comfire" @click="submitUnit">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { userUnitList, userUnit } from '@/apis/parts.js';
export default {
	data() {
		return {
			showNext: false,
			showOtherError: false,
			unitName: '',
			unitSearch: '',
			selectedUnit: {
				label: '',
				value: '',
			},
			unitList: [{id:1,unitName:'测试1'},{id:2,unitName:'测试2'},{id:3,unitName:'其他'}],
      
		};
	},
	created() {
		this.userUnitList();
	},
	activated() {
		console.log('激活');
	},
	computed: {
		filteredUnitList() {
			if (!this.unitSearch) return this.unitList;
			return this.unitList.filter((item) =>
				item.unitName.includes(this.unitSearch)
			);
		},
	},
	methods: {
		init({value,label}) {
			// 如果value不是id是其他的话就代表是自定义输入
			this.selectedUnit.value = value;
			this.selectedUnit.label = label;
			if (value == '其他') {
				this.selectedUnit.value = '';
			}
		},
		
		submitUnit() { 
			console.log(this.selectedUnit,'提交');
			this.showNext = false;
			// this.$emit('submit',this.selectedUnit);
			this.$emit('submit', { label: this.selectedUnit.label, value: this.selectedUnit.value });
		},
		userUnitList() {
			userUnitList({ size: 1000 }).then((res) => {
				if (res) {
					this.unitList = res.data;
					this.unitList.push({ unitName: '其他', id: '000' });
				}
			});
		},
		toForword() {
			this.showNext = false;
			this.selectedUnit = {
				value:'',
				label:''
			};
		},
		selectUnit(item) {
			console.log(item,'单位');
			this.selectedUnit.value = item.id;
			this.selectedUnit.label = item.unitName;
			if (item.unitName !== '其他') {
				this.unitName = '';
				this.showOtherError = false;
			}
			if (item.unitName == '其他') {
				this.showNext = true;
				this.unitName = '';
				this.showOtherError = false;
			}
		},
		onUnitSearch() {
			// 搜索方法，可以在这里添加额外的搜索逻辑
		},
		getHighlightText(text) {
			if (!this.unitSearch) return text;
			const idx = text.indexOf(this.unitSearch);
			if (idx === -1) return text;
			// 只高亮匹配部分
			const before = text.slice(0, idx);
			const match = text.slice(idx, idx + this.unitSearch.length);
			const after = text.slice(idx + this.unitSearch.length);
			return `${before}<span style="color:#0091ff">${match}</span>${after}`;
		},
		handelAdd() {
			if (this.selectedUnit.label === '其他' && !this.unitName.trim()) {
				this.showOtherError = true;
				return;
			}
			
			this.showOtherError = false;
			userUnit({unitName:this.unitName})
				.then(res=>{
					if (res) {
						this.userUnitList();
						this.showNext = false;
						this.$emit('submit',{label:this.unitName,value:'其他'});
						// this.showNext = false;
					}
				});
		},
	},
};
</script>

<style lang="scss" scoped>
 .clearIcon{
  position: absolute;
  right: 20rpx;
  top: 4px;
 }
.unit-popup {
  .unitItem {
    display: flex;
    image{
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }
    .radio-dot {
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;

      margin-right: 8rpx;
      border: 2rpx solid #ccc;
    }
    .red-dot {
      border-color: #0091ff;
    }
  }

  border-radius: 8rpx 8rpx 0rpx 0rpx;
  background: #f3f6f8;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.1181);

  position: relative;
  .top {
    border-radius: 8rpx 8rpx 0rpx 0rpx;
    background: #fff;
    padding: 20rpx;
    margin-bottom: 20rpx;
  }
  .middle {
    background: #fff;
    padding: 20rpx;
  }
  .bottom {
    border-top: 2rpx solid #eeeeee;
    padding: 20rpx 40rpx;
    background: #fff;
    .nextBtn {
      display: flex;
      justify-content: space-between;
      view {
        display: flex;
        flex: 1;
      }
    }
    .unit-btn-back,
    .unit-btn-comfire,
    .unit-btn-submit {
      height: 70rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }
    .unit-btn-comfire,
    .unit-btn-submit {
      color: #fff;
      background: #0091ff;
      border: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .unit-btn-submit {
      border-radius: 0rpx 16rpx 16rpx 0rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .unit-btn-back {
      border-radius: 0rpx 16rpx 16rpx 0rpx;
      background: #f5fbff;
      color: #0091ff;
    }
  }
  .unit-popup-bar {
    width: 64rpx;
    height: 10rpx;
    border-radius: 5rpx;
    background: #d8d8d8;
    margin: 0 auto 24rpx auto;
  }
  .unit-popup-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 24rpx;
  }
  .unit-popup-search {
    margin-bottom: 16rpx;
    position: relative;
    input {
      height: 64rpx;
      padding: 12rpx 16rpx;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      background: #f7f7f7;
    }
  }
  .unit-popup-list {
    max-height: 300rpx;
    min-height: 120rpx;
    height: 600rpx;
    margin-bottom: 50rpx;
    .unit-popup-item {
      display: flex;
      align-items: center;
      padding: 18rpx 0;
      font-size: 28rpx;
      // 无border-bottom
      .custom-radio {
        width: 16px;
        height: 16px;
        margin-right: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .radio-circle {
          width: 16px;
          height: 16px;
          border-radius: 50%;
          border: 2px solid #ccc;
          background: #fff;
          position: relative;
        }
        .radio-checked {
          border-color: #0091ff;
        }
        .radio-checked::after {
          content: "";
          display: block;
          width: 8px;
          height: 8px;
          background: #0091ff;
          border-radius: 50%;
          position: absolute;
          left: 2px;
          top: 2px;
        }
      }
    
    }
  }
  .unit-popup-other {
    height: 200rpx;
    margin: 16rpx 0 0 0;
    .otherName {
      margin: 8rpx;
      color: #333;
      font-size: 32rpx;
      font-weight: 500;
      text {
        color: #e02020;
      }
    }

    input {
      //   width: 100%;
      height: 64rpx;
      border: 2rpx solid #e9e9e9;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      background: #f7f7f7;
    }
    .error-input {
      border: 2rpx solid #e02020 !important;
    }
    .unit-popup-error {
      color: #e02020;
      font-size: 24rpx;
      margin-top: 8rpx;
    }
  }
  .unit-popup-btns {
  }
}
</style>
